<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';

defineOptions({
  name: 'HeaderBanner'
});

const appStore = useAppStore();

const { userInfo, currentOrgPosition } = useAuth();

const gap = computed(() => (appStore.isMobile ? 0 : 16));

interface StatisticData {
  id: number;
  label: string;
  value: string;
}

const statisticData = computed<StatisticData[]>(() => [
  {
    id: 0,
    label: '待办事项',
    value: '0'
  },
  {
    id: 1,
    label: '消息通知',
    value: '0'
  }
]);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      {{ userInfo()?.isAdmin || userInfo()?.isTenantAdmin }}
      <NGi span="24 s:24 m:18">
        <div class="flex-y-center">
          <div class="size-72px shrink-0 overflow-hidden rd-1/2">
            <img src="@/assets/imgs/soybean.jpg" class="size-full" />
          </div>
          <div class="pl-12px">
            <h3 class="text-18px font-semibold">Hi, {{ userInfo()?.realName }}, 欢迎登录使用本系统！</h3>
            <p class="text-#595959 leading-30px">
              {{
                userInfo()?.isUser
                  ? `【组织】${currentOrgPosition()?.orgName} ，【岗位】${currentOrgPosition()?.positionName}`
                  : `【角色】${userInfo()?.isAdmin ? '超级管理员' : '租户管理员'}`
              }}
            </p>
          </div>
        </div>
      </NGi>
      <NGi span="24 s:24 m:6">
        <NSpace :size="24" justify="end">
          <NStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
        </NSpace>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
